<template>
  <el-table :data="tableData" stripe style="width: 100%" @sort-change="handleSortChange">
    <el-table-column prop="aid" label="活动ID" width="100" sortable />
    <el-table-column prop="aname" label="活动名称" width="150" />
    <el-table-column prop="des" label="活动介绍" width="200" />
    <el-table-column prop="people" label="人数上限" width="100" />
    <el-table-column prop="adress" label="活动地点" width="150" />
    <el-table-column prop="oid" label="组织者ID" width="100" />
    <el-table-column prop="reg_start" label="报名开始时间" width="180" />
    <el-table-column prop="reg_end" label="报名截止时间" width="180" />
    <el-table-column prop="act_start" label="活动开始时间" width="180" />
    <el-table-column prop="act_end" label="活动结束时间" width="180" />
    <el-table-column prop="state" label="审核状态" width="120">
      <template #default="{ row }">
        <el-tag :type="getStateTagType(row.state)">
          {{ getStateText(row.state) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="password" label="签到码" width="120" />
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="handleReview(row)">审核</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 审核对话框 -->
  <el-dialog v-model="reviewDialogVisible" title="活动审核" width="500px">
    <el-form :model="reviewForm" label-width="80px">
      <el-form-item label="当前状态">
        <el-tag :type="getStateTagType(reviewForm.currentState)">
          {{ getStateText(reviewForm.currentState) }}
        </el-tag>
      </el-form-item>
      <el-form-item label="更改为">
        <el-radio-group v-model="reviewForm.newState">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">审核中</el-radio>
          <el-radio :label="2">已通过</el-radio>
          <el-radio :label="3">已拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="reviewDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmReview">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios'
axios.defaults.withCredentials = true;
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

const tableData = ref([])
const reviewDialogVisible = ref(false)
const reviewForm = reactive({
  aid: null,
  currentState: 0,
  newState: 0
})

// 获取活动数据
const fetchActivities = async () => {
  const token = localStorage.getItem('authToken');
  const response = await axios.get("http://localhost:8080/actions", {
    headers: { Authorization: `Bearer ${token}` }
  });
  tableData.value = response.data;
};

// 排序处理
const handleSortChange = (sortData: { prop: string; order: 'ascending' | 'descending' | null }) => {
  const { prop, order } = sortData;
  if (!order || !prop) return;

  tableData.value = tableData.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else {
      return a[prop] < b[prop] ? 1 : -1;
    }
  });
};

// 状态标签类型
const getStateTagType = (state: number) => {
  switch(state) {
    case 2: return 'success'; // 已通过
    case 3: return 'danger';  // 已拒绝
    case 1: return 'info';    // 审核中
    default: return 'warning'; // 待审核
  }
}

// 状态数字转文本
const getStateText = (state: number) => {
  switch(state) {
    case 0: return '待审核';
    case 1: return '审核中';
    case 2: return '已通过';
    case 3: return '已拒绝';
    default: return '未知状态';
  }
}

// 打开审核对话框
const handleReview = (row: any) => {
  reviewForm.aid = row.aid;
  reviewForm.currentState = row.state;
  reviewForm.newState = row.state;
  reviewDialogVisible.value = true;
};

// 确认审核
const confirmReview = async () => {
  try {
    const token = localStorage.getItem('authToken');
    await axios.put(`http://localhost:8080/actions/${reviewForm.aid}/state`, 
      { state: reviewForm.newState },
      { headers: { Authorization: `Bearer ${token}` } }
    );
    
    ElMessage.success("状态更新成功");
    reviewDialogVisible.value = false;
    fetchActivities();
  } catch (err) {
    console.error(err);
    ElMessage.error("状态更新失败");
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchActivities();
});
</script>

<style scoped>
/* 可以保留原有样式或根据需要调整 */
</style>